<template>
	<div class="col-sm-12 add-service">
		<section class="content-header common-title">
			<h4>安全设置</h4>
		</section>
		<div class="box-widget">
			<div class="box-header with-border">

				<div class="row" style="padding: 15px 10px;">
					<div class="col-sm-3 text-center">
						<!--<img id="avatarDefault" src="../../static/images/ali-avatar.png" style="width: 80px;height:80px;;"/> -->
						<img id="avatar" src="" style="width: 80px;height:80px;;">
						<form action="/baseInfo/updateUserAvatar.do" enctype="multipart/form-data" method="post" id="changeAvatarForm" style="margin-top: 30px;">
							<input type="hidden" name="userId" id="userId" value="">
							<p class="text-center select_file" style="margin-bottom: 0;">
								<button class="btn btn-primary update-btn mt20 uploadA">修改头像</button>
								<input type="file" style="display: none" id="avatarFile" name="avatarFile">
							</p>
						</form>
					</div>
					<div class="col-sm-9" style="padding-top: 30px;">
						<p>登录帐号：<span id="loginName"></span> </p>
						<p>账号ID: <span id="userid"></span></p>
						<p>注册时间 ：<span id="registerDate"></span></p>
					</div>
				</div>
			</div>
			<div class="box-header with-border">
				<div class="row" style="padding: 15px 10px;">
					<div class="col-sm-3">
						您当前的账号安全程度
					</div>
					<div class="col-sm-4">
						<div class="progress" style="margin-bottom: 0">
							<div id="securityDegreeLow" class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="display: none; width: 60%">
								<span class="sr-only">60% Complete (warning)</span>
							</div>
							<div id="securityDegreeHigh" class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
								<span class="sr-only">100% Complete (warning)</span>
							</div>
						</div>
					</div>
					<div class="col-sm-3">
						<span>安全级别：</span>
						<span id="securityLevelLow" class="text-yellow" style="display: none; width: margin: 0 30px 0 10px">中 </span>
						<span>继续努力</span>
						<span id="securityLevelHigh" class="text-green" style="margin: 0 30px 0 10px">高</span>
					</div>
				</div>
			</div>
			<div class="box-header with-border">
				<div class="row" style="padding: 15px 10px;">
					<div class="col-sm-2 text-bold">
						登录密码
					</div>
					<div class="col-sm-8">
						安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码
					</div>
					<div class="col-sm-2">
						<span class="text-green"><i class="fa fa-check-circle"></i> 已设置  ｜</span>
						<a id="changePassword" href="javascript:;">修改</a>
					</div>
				</div>
			</div>
			<div class="box-header with-border">
				<div class="row" style="padding: 15px 10px;">
					<div class="col-sm-2 text-bold">
						手机绑定
					</div>
					<div class="col-sm-8">
						安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码
					</div>
					<div class="col-sm-2">
						<span class="text-green"><i class="fa fa-check-circle"></i> 已设置  ｜</span>
						<a id="changeMobile" href="javascript:;">修改</a>
					</div>
				</div>
			</div>
			<div class="box-header with-border">
				<div class="row" style="padding: 15px 10px;">
					<div class="col-sm-2 text-bold">
						邮箱绑定
					</div>
					<div class="col-sm-8">
						安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码
					</div>
					<div class="col-sm-2">
						<span id="emailBindNo" class="text-yellow" style="display: none"><i class="fa fa-info-circle"></i> 未绑定  ｜</span>
						<a id="bindEmail" style="display: none" href="javascript:;">绑定</a>
						<span id="emailBindYes" class="text-green"><i class="fa fa-check-circle"></i> 已设置  ｜</span>
						<a id="changeEmail" href="javascript:;">修改</a>
						<!--<span id="emailBind" class="text-green"><i class="fa fa-check-circle"></i> 已设置  ｜</span> -->
						<!--<a id="changeEmail" href="javascript:;">修改</a> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style>

</style>